<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>积分管理</title>
    <link href="__STATIC__/css/swiper.min.css" rel="stylesheet">
    <link href="/html/layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="/html/css/base.css">
    <style>
        .layui-layer{
            border-radius: 25px !important;
            top:80px !important;
        }
    </style>
</head>
<body>
<div class="activity personalIntegral" id="personHeight">
    <div class="personalIntegralTop">
        {$data.user.user_nickname}
        <text class="fgxSty">|</text>
            <img src="/html/img/hy.png">
            <text class="zyzHy">消防志愿者</text>&nbsp;&nbsp;&nbsp;
    </div>

    <div class="scpm">
        <img src="/html/img/shi.png" class="shiSty">
        志愿时长：<text class="textSty">12h</text>
        <img src="/html/img/ming.png" class="ming">
        排名信息：<text class="textSty">208</text>
    </div>
    <div class="jfdh">
        <div class="jfdhLeft">
            <div>总积分（分）</div>
            <div class="point">{$data.all_points}</div>
        </div>
        <div class="jfdhLeft">
            <div>可用（分）</div>
            <div class="point">{$data.can_points}</div>
        </div>
        <div class="jfdhLeft">
            <div>已使用（分）</div>
            <div class="point">{$data.used_points}</div>
        </div>
        <div class="jfdhLeft">
            <div>兑换券(张)</div>
            <div class="point">{$list|count}</div>
            <!--<div class="inBtn">-->
                <!--<button type="button" class="layui-btn" id="jfdh">积分兑换</button>-->
            <!--</div>-->
            <!--<div class="inBtn">-->
                <!--<button type="button" class="layui-btn xfqBtn">查看销分券</button>-->
            <!--</div>-->
        </div>
        <div style="clear: both;"></div>
    </div>



    <div class="dhjl">
        <div class="dhjlTitle">
            <img src="/html/img/dhjl.png">
            兑分列表
        </div>
        <div class="jlBlock">
            <table class="layui-table" lay-skin="nob">
                <colgroup>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>名称</th>
                    <th>积分(分)</th>
                    <th>兑换</th>
                </tr>
                </thead>
                <tbody>
                <foreach name="points" id="vo">
                    <tr>
                        <td>{$vo.name}</td>
                        <td>{$vo.point}</td>
                        <td>
                            <div class="inBtn">
                            <button type="button" class="layui-btn jfd" data-id="{$vo.id}" data-name="{$vo.name}" data-point="{$vo.point}">积分兑换</button>
                        </div>
                        </td>
                    </tr>
                </foreach>
                </tbody>
            </table>
        </div>
    </div>
        <div class="dhjl">
            <div class="dhjlTitle">
                <img src="/html/img/dhjl.png">
                实物列表
            </div>
            <div class="jlBlock">
                <table class="layui-table" lay-skin="nob">
                    <colgroup>
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>积分(分)</th>
                        <th>兑换</th>
                    </tr>
                    </thead>
                    <tbody>
                    <foreach name="goods" id="vo">
                        <tr>
                            <td>{$vo.name}</td>
                            <td>{$vo.point}</td>
                            <td>
                                <div class="inBtn">
                                    <button type="button" class="layui-btn jfd" data-id="{$vo.id}" data-name="{$vo.name}" data-point="{$vo.point}">积分兑换</button>
                                </div>
                            </td>
                        </tr>
                    </foreach>
                    </tbody>
                </table>
            </div>
        </div>

    <div class="dhjl">
        <div class="dhjlTitle">
            <img src="/html/img/dhjl.png">
            兑换记录
        </div>
        <div class="jlBlock">
            <table class="layui-table" lay-skin="nob">
                <colgroup>
                    <col>
                    <col>
                    <col>

                </colgroup>
                <thead>
                <tr>
                    <th>兑换名称</th>
                    <th>使用积分(分)</th>
                    <th>兑换时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <foreach name="list" id="vo">
                <tr>
                    <td>{$vo.goods.name}</td>
                    <td>{$vo.point}</td>
                    <td>{$vo.ctime|date="Y-m-d H:i"}</td>
                    <!--<td>{$vo.status==1?'<p style="color: indianred">已使用</p>':'<p style="color: #3fad46">可用</p>'}</td>-->
                    <td>
                        <if condition="$vo.status==1">
                            <p style="color: indianred">已使用</p>
                            <else/>
                            <p style="color:#3fad46;">可用</p>
                        </if>
                    </td>
                    <td><div class="inBtn">
                        <if condition="$vo.status==0">

                        <button type="button" class="layui-btn qrcode" data-code="{$vo.qrcode|get_qrcode}"  style="background-color:  #009688">查看二维码</button>
                           <else/>
                            <button type="button" class="layui-btn del" data-id="{$vo.id}"  style="background-color:orangered ">删除</button>
                        </if>
                    </div></td>
                </tr>
                </foreach>
                </tbody>
            </table>
        </div>
        <ul class="layer_notice" style="display: none;">
            <li id="show"></li>
        </ul>
    </div>
</div>
</body>
<div id="tanchu" style="display: none;">
    <img src="/html/img/jfdh1.png" class="jfdhImg">
    <div class="tishiCon"></div>
    <div class="jfdhBtn">
        <button class="dhBtn" value="1">
            <img src="/html/img/qudingDh.png" class="dhSty">
        </button>
        <div class="qxBtn">
            <img src="/html/img/quxiaoDh.png" class="dhSty">
        </div>
        <div style="clear: both;"></div>
    </div>
</div>


<script src="__STATIC__/js/jquery.min.js"></script>
<script src="__STATIC__/js/swiper.min.js"></script>
<script type="text/javascript" src="/html/js/TweenMax.min.js"></script>
<script type="text/javascript" src="/html/layui/layui.js"></script>
<script type="text/javascript" src="/html/js/base.js"></script>
<script type="text/javascript" src="__TMPL__/public/assets/js/clipboard.min.js"></script>
<script>
    $(function () {
        $(".jfdhLeft:last").css("border","none");
        $(".jlBlock table tr:first").css("border","none");
        $(".jlBlock table tr:last").css("border","none");
    });
    //layui
    layui.use(['form','laydate','laypage','layer'], function(){
        var form = layui.form
                ,laydate = layui.laydate
                ,laypage = layui.laypage
                , layer = layui.layer;
        var tc;
        // 积分兑换
        $(".jfd").on('click',function (e) {
            var data=e.target.dataset
            id=data.id
            var str='您确定使用'+data.point+'个积分兑换'+data.name+'吗?'
            $(".tishiCon").html(str)
            //示范一个公告层
            tc=layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: true
                ,area: '500px'
                ,shade: 0.3
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,moveType: 1 //拖拽模式，0或者1
                ,content:  $('#tanchu')
                ,success: function(res){
                    //console.log(data.id)
//                    var btn = layero.find('.layui-layer-btn');
//                    btn.find('.layui-layer-btn0').attr({
//                        href: 'http://www.layui.com/'
//                        ,target: '_blank'
//                    });
                }
            });
        });
        $(".dhBtn").on('click',function (e) {
            console.log(id)
            $.ajax({
                type: "GET",
                url: "exchange",
                data: {'id':id},
                dataType: "json",
                success: function(data){
                    console.log(data)
                    layer.msg(data.msg);
                    layer.close(tc);
                    if(data.error==1){
                        window.location.reload()
                    }

                }
            });
        });

        $(".qxBtn").on('click',function () {
            layer.close(tc);
        });
        $(".qrcode").on('click',function (e) {
            var code = e.target.dataset.code
            var html="<img style='height: 200px;width: 200px;' src="+code+">";
            layer.open({
                type : 1,
                title : false,
                closeBtn : 0,
                shade: [0.001, '#393D49'],
                area : '200px',
                skin : 'layui-layer-nobg', //沒有背景色
                shadeClose : true,
                content : html
            });
        })

        $(".show").on('click',function (e) {
            var code = e.target.dataset.code
            var str='您的校验码为&nbsp;：&nbsp;'+code
            new ClipboardJS('.show',{text:function(trigger) { return code;} });
            console.log(code)
            layer.msg('已经成功复制校验码到粘贴板', {time: 1500, icon:6});
//            $("#show").html(str)
//            layer.open({
//                type: 1,
//                shade: false,
//                title: false, //不显示标题
//                content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
//                cancel: function(){
//                    layer.msg('已经成功复制并关闭校验码', {time: 1500, icon:6});
//                }
//            });
        })

        $(".del").on('click',function(e){
            var id=e.target.dataset.id
            layer.msg('确定要删除么？', {
                time: 0 //不自动关闭
                ,btn: ['是滴', '算了']
                ,yes: function(index){
                    $.ajax({
                        type: "GET",
                        url: "log_del",
                        data: {'id':id},
                        dataType: "json",
                        success: function(data){
                            console.log(data)
                            layer.msg(data.msg);
                            layer.close(tc);
                            if(data.code==1){
                                layer.close(index);
                                layer.msg('删除成功！', {time: 2000, icon:6},window.location.reload());

                            }

                        }
                    });

                }
            });
        })







    });
</script>
</html>